Angular Forms দুটি মূল পদ্ধতিতে কাজ করে— Template-driven Forms এবং Reactive Forms। যেখানে Template-driven Forms সাধারণত সিম্পল ফর্মের জন্য ব্যবহৃত হয়, সেখানে Reactive Forms আরও জটিল এবং ডায়নামিক ফর্মসের জন্য উপযুক্ত।

এখানে, Advanced Forms বিষয়টি Reactive Forms এর উন্নত ব্যবহার নিয়ে আলোচনা করবে, যেখানে FormGroup, FormControl, FormArray, Validators, Async Validators, Custom Validators এবং Form Arrays নিয়ে গভীরভাবে আলোচনা করা হবে। এগুলো Angular ফর্মের শক্তিশালী ফিচার যা ফর্মের সঠিকতা, কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

Reactive Forms Overview

Reactive Forms (বা Model-driven Forms) এমন একটি ফর্ম মডেল যেখানে ফর্মের স্টেট, ভ্যালিডেশন, এবং অন্যান্য কার্যকলাপ সম্পূর্ণভাবে কম্পোনেন্ট ক্লাসের মাধ্যমে পরিচালিত হয়। Reactive Forms সাধারণত একাধিক ফর্ম কন্ট্রোল, ডায়নামিক কন্ট্রোল এবং অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন প্রয়োজন হলে ব্যবহৃত হয়।

Reactive Forms কনফিগারেশন

Reactive Forms ব্যবহারের জন্য Angular অ্যাপ্লিকেশনে ReactiveFormsModule আমদানি করতে হবে।

ReactiveFormsModule আমদানি করা:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
})
export class AppModule {}

FormControl, FormGroup, এবং FormArray

FormControl, FormGroup, এবং FormArray হল Reactive Forms-এ ব্যবহৃত প্রধান কম্পোনেন্ট।

1. FormControl: একটি ফর্মের একটি কন্ট্রোল (যেমন ইনপুট ফিল্ড) প্রতিনিধিত্ব করে।
2. FormGroup: একাধিক FormControl গুলিকে একটি গ্রুপে রাখে।
3. FormArray: একাধিক FormGroup বা FormControl ধারণ করতে ব্যবহৃত হয়।

FormControl উদাহরণ:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
})
export class UserFormComponent {
  userName = new FormControl('');
}

এখানে, userName একটি FormControl যা ইনপুট ফিল্ডের মান স্টোর করবে।

FormGroup উদাহরণ:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
})
export class RegistrationFormComponent {
  registrationForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    email: new FormControl('')
  });
}

এখানে, FormGroup এর মধ্যে তিনটি FormControl রয়েছে, যেগুলি একসাথে একটি ফর্ম গঠন করে।

FormArray উদাহরণ:

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-user-skills',
  templateUrl: './user-skills.component.html',
})
export class UserSkillsComponent {
  skillsForm = new FormGroup({
    skills: new FormArray([new FormControl('Angular')])
  });

  get skills() {
    return this.skillsForm.get('skills') as FormArray;
  }

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

এখানে, FormArray ব্যবহার করা হয়েছে যা একাধিক ফর্ম কন্ট্রোল ধারণ করতে পারে (যেমন একাধিক স্কিল ইনপুট ফিল্ড)।

Validators

Validators হল Angular Forms-এর একটি গুরুত্বপূর্ণ অংশ, যা ফর্ম কন্ট্রোলের ইনপুট যাচাই করতে ব্যবহৃত হয়। এটি সিঙ্গেল এবং অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন হিসেবে কাজ করতে পারে।

সিঙ্গেল Validator উদাহরণ:

import { FormControl, Validators } from '@angular/forms';

export class RegistrationFormComponent {
  email = new FormControl('', [Validators.required, Validators.email]);
}

এখানে, Validators.required এবং Validators.email দুটি ভ্যালিডেশন অ্যাপ্লাই করা হয়েছে email ফর্ম কন্ট্রোলে।

কাস্টম Validator উদাহরণ:

আপনি Custom Validator তৈরি করতে পারেন যা আপনার নির্দিষ্ট লজিক অনুসারে ফর্ম ইনপুট যাচাই করবে।

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function forbiddenNameValidator(control: AbstractControl): ValidationErrors | null {
  const forbidden = /admin/.test(control.value);
  return forbidden ? { forbiddenName: { value: control.value } } : null;
}

এখানে, forbiddenNameValidator একটি কাস্টম ভ্যালিডেটর যা admin শব্দটি ফর্মের ইনপুটে থাকলে তা নিষিদ্ধ করে।

Async Validators

Async Validators হল এমন ভ্যালিডেটর যা সার্ভারের সাথে যোগাযোগ করে এবং অ্যাসিঙ্ক্রোনাসভাবে ইনপুট যাচাই করে। এটি সাধারণত HTTP রিকোয়েস্ট বা এপিআই কল করার জন্য ব্যবহৃত হয়।

Async Validator উদাহরণ:

import { Observable } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';
import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';

export function checkEmailTaken(control: AbstractControl): Observable<ValidationErrors | null> {
  return new Observable(observer => {
    setTimeout(() => {
      if (control.value === 'test@example.com') {
        observer.next({ emailTaken: true });
      } else {
        observer.next(null);
      }
      observer.complete();
    }, 1000);
  });
}

এখানে, checkEmailTaken একটি অ্যাসিঙ্ক্রোনাস ভ্যালিডেটর যা নির্দিষ্ট একটি ইমেইল চেক করে।

ফর্ম ভ্যালিডেশন এবং সাবমিট

আপনার ফর্ম সাবমিট করার আগে অবশ্যই ফর্মের ভ্যালিডেশন চেক করা উচিত। এটি করার জন্য form.valid এবং form.invalid প্রপার্টি ব্যবহার করা হয়।

onSubmit() {
  if (this.registrationForm.valid) {
    console.log('Form Submitted!', this.registrationForm.value);
  } else {
    console.log('Form is invalid');
  }
}

এখানে, ফর্ম সাবমিট করার আগে registrationForm.valid প্রপার্টি দিয়ে ফর্মটি যাচাই করা হচ্ছে।

ফর্মের ডায়নামিক কন্ট্রোলস

কখনও কখনও আমাদের ফর্মে ডায়নামিক কন্ট্রোল (যেমন নতুন ইনপুট ফিল্ড বা কন্ট্রোল) যোগ করতে হয়। Angular Reactive Forms এই কাজটি খুব সহজে পরিচালনা করতে সহায়ক।

উদাহরণ: ডায়নামিক কন্ট্রোল তৈরি করা

addControl() {
  const control = new FormControl('', Validators.required);
  (this.registrationForm.get('skills') as FormArray).push(control);
}

এখানে, একটি নতুন কন্ট্রোল skills ফর্ম অ্যারে তে ডায়নামিকভাবে যোগ করা হচ্ছে।

সারাংশ

Angular Reactive Forms এডভান্সড ফিচারগুলি, যেমন FormControl, FormGroup, FormArray, Validators, Async Validators, এবং Custom Validators ব্যবহার করে, আপনাকে জটিল এবং ডায়নামিক ফর্ম তৈরি করতে সাহায্য করে। এই ফিচারগুলো Angular ফর্মের কার্যকারিতা, ভ্যালিডেশন এবং ইউজার ইন্টারফেসে এক্সটেনসিভ কাস্টমাইজেশন করতে সহায়তা করে। Reactive Forms পদ্ধতি ব্যবহারে ফর্মের পুরো স্টেট এবং লজিক আপনার কম্পোনেন্টে থাকতে পারে, যা আরও শক্তিশালী এবং নিয়ন্ত্রিত অ্যাপ্লিকেশন তৈরি করতে সক্ষম।

Angular-এ ডাইনামিক ফর্মস তৈরি করা যায়, যেখানে ফর্মের এলিমেন্টগুলো রানটাইমে পরিবর্তন করা হয়। Angular ফর্ম দুটি প্রধানভাবে পরিচালনা করতে পারে: Template-driven forms এবং Reactive forms। ডাইনামিক ফর্ম তৈরির জন্য সাধারণত Reactive Forms ব্যবহার করা হয়, কারণ এটি বেশি কাস্টমাইজেশন এবং কন্ট্রোল সরবরাহ করে। ডাইনামিক ফর্মের মাধ্যমে আপনি কনট্রোল, ভ্যালিডেশন এবং লেআউটকে কোডের মাধ্যমে নিয়ন্ত্রণ করতে পারেন।

Reactive Forms এ ডাইনামিক ফর্ম তৈরি করা

Reactive Forms Angular-এর একটি শক্তিশালী ফিচার, যা ফর্মের ডেটা এবং স্টেট ম্যানেজমেন্ট খুব সহজে করতে সাহায্য করে। ডাইনামিক ফর্ম তৈরির জন্য, আপনি ফর্ম কন্ট্রোল (FormControl) এবং ফর্ম গ্রুপ (FormGroup) ব্যবহার করতে পারেন। এটি আপনাকে ফর্মের ক্ষেত্রগুলো চলতি সময়ে অ্যাড, রিমুভ, অথবা আপডেট করতে সহায়তা করে।

১. ReactiveFormsModule ইনস্টল করা

প্রথমে, আপনাকে ReactiveFormsModule মডিউলটি ইম্পোর্ট করতে হবে app.module.ts ফাইলে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';  // Import ReactiveFormsModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule  // Add ReactiveFormsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ডাইনামিক ফর্ম তৈরি করার উদাহরণ

ধরা যাক, আমাদের একটি ফর্ম আছে, যেখানে আমরা রিয়েল টাইমে ইনপুট ফিল্ড অ্যাড বা রিমুভ করতে চাই।

২. ফর্ম কন্ট্রোল (FormControl) এবং ফর্ম গ্রুপ (FormGroup) ব্যবহার করা

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <div [formGroupName]="i">
            <input formControlName="name" placeholder="Item Name" />
            <input formControlName="value" placeholder="Item Value" />
            <button (click)="removeItem(i)">Remove</button>
          </div>
        </div>
      </div>
      <button (click)="addItem()">Add Item</button>
      <button type="submit" [disabled]="dynamicForm.invalid">Submit</button>
    </form>
  `,
})
export class DynamicFormComponent {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      items: this.fb.array([this.createItem()]), // Initial array with one item
    });
  }

  get items() {
    return (this.dynamicForm.get('items') as FormArray);
  }

  createItem(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      value: ['', Validators.required],
    });
  }

  addItem() {
    this.items.push(this.createItem());
  }

  removeItem(index: number) {
    this.items.removeAt(index);
  }

  onSubmit() {
    console.log(this.dynamicForm.value);
  }
}

কোড ব্যাখ্যা

• FormGroup: ফর্মের জন্য একটি গ্রুপ তৈরি করে, যেখানে একাধিক ফর্ম কন্ট্রোল থাকে।
• FormArray: এটি একটি অ্যারে টাইপ ফর্ম কন্ট্রোল, যেখানে একাধিক ফর্ম গ্রুপ রাখা যায়। এটি ডাইনামিক ফর্ম তৈরির জন্য আদর্শ।
• FormBuilder: এটি Angular এর একটি সরঞ্জাম যা ফর্ম তৈরি করার প্রক্রিয়া সহজ করে দেয়। fb.group() এবং fb.array() ব্যবহার করে আমরা ফর্ম গ্রুপ এবং ফর্ম অ্যারে তৈরি করি।
• addItem(): এটি একটি নতুন ফর্ম ইনপুট তৈরি করার জন্য ব্যবহৃত হয় এবং FormArray তে যোগ করে।
• removeItem(i): এটি নির্দিষ্ট ইনডেক্স থেকে একটি ইনপুট ফিল্ড মুছে দেয়।

ফর্ম ভ্যালিডেশন

ডাইনামিক ফর্মে আপনি ফর্ম কন্ট্রোলের উপর ভ্যালিডেশনও অ্যাপ্লাই করতে পারেন। উপরের উদাহরণে, name এবং value ফিল্ডে Validators.required ব্যবহার করা হয়েছে, যাতে ফিল্ডগুলো ফাঁকা না থাকে।

৩. কাস্টম ভ্যালিডেশন

আপনি কাস্টম ভ্যালিডেটরও তৈরি করতে পারেন যা ফর্ম কন্ট্রোলের ভ্যালিডেশন চেক করবে। উদাহরণস্বরূপ:

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function nameValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  if (value && value.length < 3) {
    return { 'nameTooShort': true };
  }
  return null;
}

এই কাস্টম ভ্যালিডেটরটি name ফিল্ডে প্রয়োগ করা যেতে পারে, যাতে সেটি কমপক্ষে ৩ ক্যারেক্টার দীর্ঘ হয়।

সারাংশ

Angular-এ ডাইনামিক ফর্ম তৈরি করা খুবই সহজ এবং শক্তিশালী একটি বৈশিষ্ট্য। এটি Reactive Forms ব্যবহার করে করা যায়, যা আপনাকে ফর্ম কন্ট্রোল, গ্রুপ, এবং অ্যারে নিয়ন্ত্রণ করার সুবিধা দেয়। Angular CLI এবং ReactiveFormsModule ব্যবহারের মাধ্যমে ডাইনামিক ফর্ম তৈরি করতে পারেন, যেখানে আপনি ফর্মের ইনপুট ফিল্ডগুলো যোগ, মুছে, অথবা আপডেট করতে পারবেন।

Angular-এ Reactive Forms এর মধ্যে FormArray একটি বিশেষ ফিচার, যা ডায়নামিক এবং ভ্যারিয়েবল আকারের ফর্ম কন্ট্রোল তৈরি করতে সহায়তা করে। FormArray মূলত এমন একটি ফর্ম কন্টেইনার, যেখানে আপনি একাধিক ফর্ম কন্ট্রোল যুক্ত করতে পারেন এবং এটি ফর্মের প্রতিটি কন্ট্রোলের জন্য একটি অ্যারে ধারণ করে।

Reactive Forms এর মধ্যে FormArray ব্যবহৃত হয় যখন আপনাকে একই ধরনের একাধিক ইনপুট ফিল্ডের মান সংগ্রহ করতে হয়, যেমন একাধিক ইমেইল বা ফোন নাম্বার ইনপুট করা।

FormArray এর মৌলিক ধারণা

FormArray একটি অ্যারে ধারণ করে, যেখানে একাধিক FormControl, FormGroup অথবা আরও অন্য FormArray থাকতে পারে। এটি আপনাকে ফর্মের কন্ট্রোলগুলো একটি ডাইনামিক পদ্ধতিতে পরিচালনা করতে দেয়, এবং আপনি runtime এ কন্ট্রোল যোগ বা মুছে ফেলতে পারেন।

FormArray তৈরি করা

Reactive Forms ব্যবহারে FormArray তৈরি করতে প্রথমে FormBuilder এবং FormArray ব্যবহার করতে হবে।

Step 1: ReactiveFormsModule ইম্পোর্ট করা

প্রথমে, AppModule-এ ReactiveFormsModule ইম্পোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';  // Import ReactiveFormsModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule  // Add ReactiveFormsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: FormArray তৈরি করা

Angular Reactive Forms ব্যবহার করে FormArray তৈরি করা হয় এবং ফর্মের কন্ট্রোলগুলো যোগ করা হয়। এখানে একটি উদাহরণ দেওয়া হলো যেখানে FormArray ব্যবহার করে একাধিক email ইনপুট ফিল্ড তৈরি করা হচ্ছে:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <div formArrayName="emails">
        <div *ngFor="let email of emailControls(); let i = index">
          <input [formControlName]="i" placeholder="Enter Email" />
          <button (click)="removeEmail(i)">Remove</button>
        </div>
      </div>
      <button type="button" (click)="addEmail()">Add Email</button>
      <button type="submit" [disabled]="!myForm.valid">Submit</button>
    </form>
  `
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      emails: this.fb.array([this.createEmail()])  // Create initial FormArray with one email
    });
  }

  get emails(): FormArray {
    return this.myForm.get('emails') as FormArray;
  }

  emailControls() {
    return (this.myForm.get('emails') as FormArray).controls;
  }

  createEmail(): FormGroup {
    return this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }

  addEmail() {
    this.emails.push(this.createEmail());
  }

  removeEmail(i: number) {
    this.emails.removeAt(i);
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

FormArray এর বিভিন্ন মেথড

Angular এর FormArray ক্লাসে কিছু গুরুত্বপূর্ণ মেথড রয়েছে যেগুলি ব্যবহার করে আপনি ফর্ম কন্ট্রোলগুলোকে ম্যানিপুলেট করতে পারবেন:

১. push()

নতুন ফর্ম কন্ট্রোল যোগ করার জন্য push() মেথড ব্যবহার করা হয়:

this.emails.push(this.createEmail());  // Adds a new email FormGroup

২. removeAt()

একটি নির্দিষ্ট ইনডেক্সে থাকা ফর্ম কন্ট্রোল মুছে ফেলতে removeAt() মেথড ব্যবহার করা হয়:

this.emails.removeAt(index);  // Removes the email FormGroup at the specified index

৩. clear()

ফর্ম অ্যারেটি সম্পূর্ণভাবে ফাঁকা করতে clear() মেথড ব্যবহার করা হয়:

this.emails.clear();  // Removes all email FormGroups

৪. controls

FormArray এর মধ্যে থাকা সমস্ত কন্ট্রোল অ্যাক্সেস করতে controls প্রোপার্টি ব্যবহার করা হয়:

let controls = this.emails.controls;  // Accesses all form controls inside FormArray

FormArray এর সাথে Validations

FormArray এর মধ্যে যে কন্ট্রোলগুলো রয়েছে, সেগুলির উপর validation অ্যাপ্লাই করা যেতে পারে। এক্ষেত্রে, প্রতিটি কন্ট্রোলের জন্য আলাদা আলাদা Validators ব্যবহার করা হয়।

উদাহরণ: Required এবং Email Validation

createEmail(): FormGroup {
  return this.fb.group({
    email: ['', [Validators.required, Validators.email]]  // Validation added
  });
}

সারাংশ

• FormArray একটি শক্তিশালী উপাদান যা আপনাকে একাধিক ফর্ম কন্ট্রোল ডাইনামিকভাবে তৈরি এবং পরিচালনা করার সুবিধা দেয়।
• Angular Reactive Forms-এ FormArray ব্যবহার করলে একই ধরনের কন্ট্রোলগুলির সাথে কাজ করা সহজ হয়ে যায় এবং এটি runtime এ কন্ট্রোল যোগ বা মুছে ফেলার সুবিধা দেয়।
• এটি ফর্মের ডায়নামিক অংশগুলির জন্য উপযুক্ত, যেমন একাধিক ইমেইল ইনপুট, ফোন নাম্বার ইনপুট, বা অ্যাড্রেস ইনপুট।

FormArray আপনাকে Angular অ্যাপ্লিকেশনের ফর্মস তৈরি ও ম্যানেজমেন্টে আরও নমনীয়তা এবং শক্তি প্রদান করে।

Angular-এ কাস্টম ভ্যালিডেটর একটি কাস্টম ফাংশন যা ফর্ম কন্ট্রোলের মান যাচাই করতে ব্যবহৃত হয়। আপনি যখন একটি নির্দিষ্ট শর্তের অধীনে মান যাচাই করতে চান, যেমন পাসওয়ার্ড শক্তি বা ইমেইল ঠিকানা নির্দিষ্ট ফরম্যাটে না হওয়া, তখন কাস্টম ভ্যালিডেটর খুব কার্যকরী হয়। Angular ফর্মে দুই ধরনের ভ্যালিডেটর থাকে: সিঙ্গেল ভ্যালিডেটর (যেমন required, minLength) এবং কাস্টম ভ্যালিডেটর।

কাস্টম ভ্যালিডেটর তৈরি করার মাধ্যমে আপনি ফর্ম কন্ট্রোলের মানের উপর নিয়ন্ত্রণ বাড়াতে পারেন।

কাস্টম ভ্যালিডেটর তৈরি করা

কাস্টম ভ্যালিডেটর একটি ফাংশন হিসেবে তৈরি করা হয়, যা একটি AbstractControl (যেমন FormControl, FormGroup, ইত্যাদি) ইনপুট হিসেবে গ্রহণ করে এবং একটি ValidationErrors অবজেক্ট ফেরত দেয়। যদি ভ্যালিডেশন সফল হয়, তাহলে null ফেরত দেয়, অন্যথায় একটি ত্রুটি অবজেক্ট ফেরত দেয়।

কাস্টম ভ্যালিডেটরের সাধারণ গঠন

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function customValidator(control: AbstractControl): ValidationErrors | null {
  // এখানে আপনার কাস্টম ভ্যালিডেশন লজিক থাকবে
  if (control.value && control.value.length < 5) {
    return { 'minLengthError': 'Value must be at least 5 characters long' };
  }
  return null;  // যদি কোনো ত্রুটি না থাকে
}

এখানে, control.value মান যাচাই করা হচ্ছে। যদি এটি 5 অক্ষরের কম হয়, তাহলে একটি ত্রুটি অবজেক্ট ফেরত দিচ্ছে। null ফেরত দিলে মানটি ভ্যালিড হিসেবে গণ্য হবে।

কাস্টম ভ্যালিডেটর ব্যবহার করা

কাস্টম ভ্যালিডেটরটি FormControl অথবা FormGroup-এ ব্যবহার করা হয়, যেখানে আপনি ফর্ম কন্ট্রোলের জন্য কাস্টম ভ্যালিডেশন নির্ধারণ করতে পারেন।

উদাহরণ: কাস্টম ভ্যালিডেটর একটি ফর্ম কন্ট্রোলে ব্যবহার

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { customValidator } from './custom-validator';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <label for="myInput">Enter text:</label>
      <input id="myInput" formControlName="myInput" />
      <div *ngIf="myForm.get('myInput').hasError('minLengthError')">
        Minimum length is 5 characters.
      </div>
      <button type="submit" [disabled]="myForm.invalid">Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myInput: ['', [Validators.required, customValidator]]  // কাস্টম ভ্যালিডেটর ব্যবহার করা হয়েছে
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form Submitted', this.myForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

এখানে, myInput নামক ফর্ম কন্ট্রোলটি required এবং customValidator ব্যবহার করে ভ্যালিডেট করা হচ্ছে। যদি ব্যবহারকারী ৫ অক্ষরের কম ইনপুট দেয়, তাহলে একটি ত্রুটি মেসেজ দেখানো হবে।

কাস্টম অ্যাসিঙ্ক্রোনাস ভ্যালিডেটর

কাস্টম ভ্যালিডেটর শুধু সিঙ্ক্রোনাস নয়, আপনি অ্যাসিঙ্ক্রোনাস ভ্যালিডেটরও তৈরি করতে পারেন। অ্যাসিঙ্ক্রোনাস ভ্যালিডেটর সাধারণত যখন HTTP রিকোয়েস্টের মাধ্যমে কোনো মান যাচাই করতে হয় তখন ব্যবহার করা হয় (যেমন, ডাটাবেসে ইউজারনেমের স্বতন্ত্রতা চেক করা)।

অ্যাসিঙ্ক্রোনাস ভ্যালিডেটর উদাহরণ

import { AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';

export function asyncCustomValidator(control: AbstractControl): Observable<ValidationErrors | null> {
  return of(control.value).pipe(
    debounceTime(300), // কিছু সময়ের জন্য অপেক্ষা করতে হবে
    switchMap(value => {
      // এখানে আপনি HTTP রিকোয়েস্ট ব্যবহার করতে পারেন
      return value === 'existingUsername' ? of({ 'usernameTaken': true }) : of(null);
    })
  );
}

এই অ্যাসিঙ্ক্রোনাস ভ্যালিডেটরে, যদি ইনপুটের মান existingUsername হয়, তাহলে একটি ত্রুটি ফেরত দেবে। অন্যথায় null ফেরত দেবে, যা মানকে বৈধ হিসেবে গণ্য করবে।

অ্যাসিঙ্ক্রোনাস ভ্যালিডেটর ব্যবহার করা

this.myForm = this.fb.group({
  username: ['', [Validators.required], [asyncCustomValidator]]  // অ্যাসিঙ্ক্রোনাস ভ্যালিডেটর ব্যবহার
});

এখানে, username ফর্ম কন্ট্রোলে asyncCustomValidator যুক্ত করা হয়েছে, যা আসন্ন ইউজারনেমের জন্য অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন পরিচালনা করবে।

উপসংহার

Angular-এ কাস্টম ভ্যালিডেটর আপনাকে আপনার অ্যাপ্লিকেশনের ফর্ম কন্ট্রোলের জন্য কাস্টম ভ্যালিডেশন লজিক তৈরি এবং প্রয়োগ করতে সাহায্য করে। আপনি সিঙ্ক্রোনাস বা অ্যাসিঙ্ক্রোনাস ভ্যালিডেটর তৈরি করতে পারেন, যা আপনাকে আপনার অ্যাপ্লিকেশনের ব্যাবহারকারীর ইনপুট যাচাই করার আরও নিয়ন্ত্রণ দেয়।